<template>
    <div class="tabs">
        <el-tag v-for="(tag, index) in tags" :key="index" :closable="tag.name !== 'home'"
            :effect="route.name == tag.name ? 'dark' : 'plain'" @click="handMenu(tag)" @close="handClose(tag, index)">
            {{ tag.label }}
        </el-tag>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, computed } from 'vue'
const { proxy } = getCurrentInstance()
import { useRoute, useRouter } from 'vue-router'
import { useMainStore } from '../store/index.js';
const route = useRoute()
const router = useRouter()
const mainStore = useMainStore()
const tags = mainStore.tags

let handMenu = (tag) => {
    router.push(tag.name)
    mainStore.selectMenu(tag)
}

let handClose = (tag, index) => {
    mainStore.deleteMenu(tag)
    console.log('111', tag);
    if (tag.name != route.name) return
    if (index == mainStore.tags.length) {
        mainStore.selectMenu(mainStore.tags[index - 1])
        router.push(mainStore.tags[index - 1].name)
    } else {
        mainStore.selectMenu(tag[index])
        router.push(mainStore.tags[index].name)
    }


}

</script>

<style lang='less' scoped>
.tabs {
    display: flex;
    margin: 20px;
}

.el-tag {
    margin-right: 20px;
}
</style>